<script>
import { h, defineComponent } from 'vue'
import draggable from 'vuedraggable/src/vuedraggable'

export default defineComponent({
  name: 'DragBox',
  props: ['rule', 'tag', 'formCreateInject'],
  render(ctx) {
    const subRule = { ...ctx.$props.rule.props, ...ctx.$attrs }
    let _class = subRule.tag + '-drag drag-box'
    if (!Object.keys(ctx.$slots).length) {
      _class += ' ' + subRule.tag + '-holder'
    }
    subRule.class = _class
    subRule.modelValue = [...this.$props.formCreateInject.children]

    const keys = {}
    if (ctx.$slots.default) {
      const children = ctx.$slots.default()
      children.forEach((v) => {
        if (v.key) {
          keys[v.key] = v
        }
      })
    }

    return h(draggable, subRule, {
      item: ({ element }) => {
        return h('div', {}, keys[element.__fc__.key + 'fc'])
      }
    })
  }
})
</script>
